<template>
<div id="building">
<el-container class="home-container">
    <!-- 头部区域 -->
  <el-header id="header"> 
    <div>

<!-- 行分栏布局 -->
  <el-row :gutter="0">
  <el-col :span="1"><div class="block" id="img">
       <img class="bgbox" id="logo" alt="" src="~@/assets/logo.jpg">

  </div></el-col>

  <el-col :span="6"><div class="block0" >

     <b>墨 书 项 目 管 理 平 台 </b> 
  </div></el-col>



<el-col :span="1"><div class="block">
    <span classs="welcomeWord"> <img id="tou" :src="loadImg" alt=""></span>
    <!-- <img :src="loadImg" alt=""> -->

  </div></el-col>


  <el-col :span="3"><div class="block" >
    
    <span class="welcomeWord" id="dui">欢迎用户:{{this.$store.getters.getUser.user.username}}!</span>

  </div></el-col>


  <el-col :span="6"><div class="block">

 <span class="welcomeWord" >当前团队:{{this.$store.getters.getGroup.group.groupname}}</span>
  </div></el-col>
  
  <el-col :span="3"><div class="block2">
      <el-button type="info" @click="backToGroup">返回团队列表</el-button>
  </div></el-col>

   <el-col :span="2"><div class="block3">
      <el-button type="info" @click="logout">退出登录</el-button>
  </div></el-col>



    <el-col :span="1"><div class="block3">
      
      

    <el-button @click="openPersonal" class="el-icon-s-tools" id="personal">
      个人主页
      </el-button>




   </div></el-col>



  </el-row>

      
       
     
      <!-- <time class="time">{{ currentDate }}</time> -->
      
     
     
    </div>
    
    
  </el-header>

  <!-- 主体区域 -->
  <el-container>

    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- <div class="toggle-button" @click="toggleCollapse">|||</div> -->
      <!-- 侧边栏菜单区域 -->
        <el-menu

      background-color="transparent"
      text-color="#fff"
      active-text-color="white"
      align="left" 
      unique-opened :collapse="isCollapse"
      router>
      

<!-- 项目 -->
      <el-submenu index="1" >
        <!-- 一级菜单的模板区 -->
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-opportunity"></i>
          <!-- 文本 -->
          <span>项目管理</span>
        </template>

         <el-menu-item :index="'/projects'">
             <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-opportunity"></i>
          <!-- 文本 -->
          <span>项目</span>
        </template>

        </el-menu-item>

         <el-menu-item :index="'recycle'">
             <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-delete"></i>
          <!-- 文本 -->
          <span>回收站</span>
        </template>

        </el-menu-item>
        
      </el-submenu>




<!-- 管理 -->
       <el-submenu index="1" >
        <!-- 一级菜单的模板区 -->
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-custom"></i>
          <!-- 文本 -->
          <span>成员管理</span>
        </template>


      <el-menu-item index="management">
             <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-custom"></i>
          <!-- 文本 -->
          <span>管理</span>
        </template>

        </el-menu-item>


      </el-submenu>


  <!-- 文档中心 -->
       <el-submenu index="1" >
        <!-- 一级菜单的模板区 -->
        <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-order"></i>
          <!-- 文本 -->
          <span>文档中心</span>
        </template>


      <el-menu-item index="filecenter">
             <template slot="title">
          <!-- 图标 -->
          <i class="el-icon-s-order"></i>
          <!-- 文本 -->
          <span>文档中心</span>
        </template>

        </el-menu-item>


      </el-submenu>



      
       
    </el-menu>



    </el-aside>

    <!-- 右侧内容主体 -->
    <el-main>
       <router-view></router-view>
    </el-main>
  </el-container>


</el-container>
</div>
</template>

<script>
import qs from "qs";
export default
{
  // data(){
  //   return{
  //     // //当前登录用户token
  //     // usertoken: this.$store.getters.getUser.user.usertoken,
  //      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      
  //   };
  // },

  methods:{
      //加载头像
      loadAvatar(){
        const usertoken = this.$store.getters.getUser.user.usertoken;
        this.$axios({
          method: "post" /* 指明请求方式，可以是 get 或 post */,
          url: "/users/imageload" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
          data: qs.stringify({
            /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
            usertoken: usertoken,
          }),
        })
        .then((res) => {
          /* res 是 response 的缩写 */
          console.log(res.data);
          if(!res.data.success){
            this.$message.error(res.data.message);
          }
          else{
            this.loadImg = res.data.base64;
          }
        });
      },

      //退出登录
      logout(){
        const usertoken = this.$store.getters.getUser.user.usertoken;
        console.log('发送的token:'+usertoken);
        this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/users/logout" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
        }
      });
        //清空用户、团队、项目token
        this.$store.dispatch('clearUserInfo');
        this.$store.dispatch('clearGroupInfo');
        this.$store.dispatch('clearProjectInfo');
        this.$router.push('/login');
      },
      //返回团队选择页
      backToGroup(){
        this.$store.dispatch('clearGroupInfo');
        this.$store.dispatch('clearProjectInfo');
        this.$router.push('/about');
      },

      //获取所有的菜单 需要跟后端链接 p34
      getMenuList(){
        
      },
      // 点击按钮 切换菜单的折叠与展开
      toggleCollapse(){
          this.isCollapse=!this.isCollapse;
      },
      getPath(){
        return 'home/dynamic'
      },
      add(){
        return 'home'
      },
      rePath(){
        if(this.ifhome=='')
        {
          this.ifhome='home'
        }
        else
        {
          this.ifhome=''
        }
      },
      openPersonal(){
      //跳转至个人主页
      setTimeout(() => {this.$router.push("/personal")}, 10);
      // window.open('http://localhost:8080/graphdesign')
    }
  },
  data(){
    return {
      menulist:[],
      isCollapse:false,
      ifhome:'home',
      currentDate: new Date(),
      visible: false,
      //加载个人头像
      loadImg: '',  
    }

  },
  created(){
    //创建后从后端获取数据
    this.getMenuList()
    //创建后加载头像
    this.loadAvatar();
  },
  // 是否折叠
  isCollapse:false


}
</script>


<style lang="less" scoped>


#building{
background:url("~@/assets/homeView1.jpg");
width:100%;		
height:100%;		
position:fixed;
background-size:100% 100%;}


/* 控制每个块 */
  .el-col {
    border-radius: 4px;
    background-color:transparent;
    /* 左右居中 */
    text-align: center;
    /* 不能用padding 会遮盖住main！ */
    height: 30px;
   
    
  }



.el-header {
    background-color:transparent;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color:white;
    font-size: 20px;
    // 嵌套选择器
    >div {
      
      display: flex;
      align-items: center;
    }
    span {
      margin-left: 15px;
    }


}
.el-aside {
    background-color:transparent;
}
.el-main {
    background-color: #eaedf1;
}
.home-container {
    height: 100%;
}
.toggle-button{
  background-color:transparent;
  font-size: 10px;
  line-height:24px;
  color:#eaedf1;
  text-align: center;
  letter-spacing: 0.2em;
  cursor:pointer
}


#logo{
  margin-top: 0px;
  width: 40px;
  height: 40px;
  
}

.time {
  font-size: 13px;
  color:white;
}

.welcomeWord{
  font-size: 15px;
  color:white;
}


.block0{
  font-family:"微软雅黑";
  font-size: 25px;
}

.block{
  padding: 0px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 30px;
}
.block2{
  
  margin-left: 100px;
  margin-right: 0px;
}
.block3{
  margin-left: 100px;
}

#personal{
  margin-left: 20px;
}

#tou{
  height: 30px;
  padding: 8px 0;
  border-radius:50%;
  margin-right: 0px;
  padding-right: 0px;
  

}
#dui{
  margin-top: 10px;
  padding-left: 0px;
  margin-left: 0px;
}


</style>
